<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toDoList</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!-- 应用的根容器 -->
<div id="Application">
    <!-- 表单，用于添加新任务，@submit.prevent 阻止表单默认提交行为 -->
    <form @submit.prevent="addTask">
        <span>新建任务</span>
        <!-- 输入框，v-model 双向绑定 newTask 数据 -->
        <input type="text" v-model="newTask" placeholder="请输入任务">
        <!-- 提交按钮，点击时调用 addTask 方法 -->
        <button>添加</button>
    </form>
    <!-- 有序列表，用于展示所有任务 -->
    <ol>
        <!-- v-for 循环遍历 todos 数组，生成每个任务的列表项 -->
        <li v-for="(item,index) in todos">
            <!-- 任务文本 -->
            {{item}}
            <!-- 删除按钮，点击时调用 remove 方法，传入当前任务的索引 -->
            <button @click="remove(index)">删除任务</button>
        </li>
    </ol>
</div>
<script>
    // 定义应用的逻辑
    const App = {
        // 数据对象，包含 newTask 和 todos 两个属性
        data() {
            return {
                newTask: "",
                todos: []
            }
        },
        // 方法对象，包含 addTask 和 remove 两个方法
        methods: {
            // 添加任务的方法
            addTask() {
                // 检查 newTask 是否为空，如果为空则返回，不执行添加任务的逻辑
                if (this.newTask === "") return;
                // 将 newTask 的值添加到 todos 数组中
                this.todos.push(this.newTask);
                // 清空 newTask 输入框
                this.newTask = "";
            },
            // 删除任务的方法，接受一个索引参数
            remove(index) {
                // 使用 splice 方法从 todos 数组中删除指定索引的任务
                this.todos.splice(index, 1);
            }
        }
    };
    // 使用 Vue.createApp 创建应用实例，并挂载到 id 为 Application 的元素上
    Vue.createApp(App).mount("#Application");
</script>
</body>
</html>
